<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">修改登录密码</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="form">
			<u--form labelPosition="left" ref="form">
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">手机号码</view>
						<input placeholder-class="placeholderStyle" disabled :value="uerInfo.mobile"
							class="inputStyle" />
					</view>
				</u-form-item>
				
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">设置密码</view>
						<image @tap="passFlag1 = !passFlag1" class="iconfont1" mode="aspectFit"
							 :src="passFlag1?require('@/static/login/kejian.png'):require('@/static/login/nkejian.png')"></image>
						<input placeholder-class="placeholderStyle" placeholder="请输入登录密码8-15位字母+数字组合" maxlength="15" v-model="form.psw"
							class="inputStyle" :password="passFlag1?false:true" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput">
						<view class="label">重复密码</view>
						<image @tap="passFlag = !passFlag" class="iconfont1" mode="aspectFit"
							 :src="passFlag?require('@/static/login/kejian.png'):require('@/static/login/nkejian.png')"></image>
						<input placeholder-class="placeholderStyle" placeholder="请确认新密码" maxlength="15" v-model="form.reNewPassWord"
							class="inputStyle" :password="passFlag?false:true" />
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput imgCodeBox">
						<view class="label">图形验证码</view>
						<view class="imgCode" style="width: 100%;">
							<input placeholder-class="placeholderStyle" maxlength="10" :clearable="false"
								placeholder="请输入计算结果" v-model="form.regCode" />
							<image @tap="getImgCode" :src="codeSrc"></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="formInput codeBox">
						<view class="label">短信验证码</view>
						<view class="send-con">
							<input placeholder-class="placeholderStyle" :clearable="false" class="inputStyle"
								placeholder="请输入验证码" v-model="form.smsCode" maxlength="6" />
							<u-code change-text="x秒后" ref="uCode" @change="codeChange"></u-code>
							<text class="send" @tap="getCode">{{tips}}</text>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="submit-bottom">
			<view class="submit-btn" @tap="authentication">确认</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		sendPhonePswCode,setUserPsw
	} from '../../api/user.js'
	import {
		logout,
	} from '@/api/login.js'
	import {
	    mapState 
	} from 'vuex'; 
	export default {
		data(){
			return {
				passFlag:false,
				passFlag1:false,
				form:{
					regCode:"",
					psw:"",
					reNewPassWord:"",
					smsCode:"",
					uid:""
				},
				tips:"获取验证码",
				codeUid:"",
				codeSrc:""
			}
		},
		onShow() {
			this.getImgCode();
		},
		methods:{
			authentication(){
				let obj = this.form;
				let reg= /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{8,15}$/;
				if(!reg.test(obj.psw)){
					this.$u.toast('密码必须是由8-15位字母+数字组合');
				}else if(obj.reNewPassWord !== obj.psw){
					this.$u.toast('两次密码不一致！');
				}else if(obj.smsCode == ""){
					this.$u.toast('请输入短信验证码！');
				}else{
					this.$refs.min_loading.open('正在修改！');
					setUserPsw({
						psw:this.hrymd5.md5(obj.psw),
						uid:this.codeUid,
						smsCode:obj.smsCode,
					}).then(res => {
						if (res.data.success) {
							this.$refs.uToast.show({
								type: 'success',
								message: "密码修改成功,请重新登录！",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
							});
							setTimeout(()=>{
								this.outLogin();
							},1000);
						} else {
							this.$u.toast(res.data.msg);
						}
					}).finally(() => {
						this.$refs.min_loading.close();
					});
				}
				// this.$refs.min_loading.open('正在修改！');
			},
			// 退出登录
			outLogin() {
				logout().then(res => {
					if (res.data.success) {
						this.$store.dispatch("OutLogin");
						uni.reLaunch({
							url:"/pages/login/login"
						});
					}
				})
			},
			getCode() {//获取验证码btn
				if(this.form.regCode == ""){
					uni.$u.toast('请输入图形验证码！');
					return;
				}
				if(this.$refs.uCode.canGetCode) {
					this.getLoginCode();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			getImgCode(){//获取图形验证码
				this.codeUid = new Date().getTime();
				this.codeSrc = `${this.baseApi}/code/loginCode?uid=${this.codeUid}`;
			},
			getLoginCode(){//获取短信验证码
				this.$refs.min_loading.open('正在发送短信验证码');
				sendPhonePswCode({
					mobile:this.uerInfo.mobile,
					uid:this.codeUid,
					regCode:this.form.regCode,
				}).then(res => {
					if (res.data.success) {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						this.$u.toast(res.data.msg);
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
		computed:{
			...mapState(["hasLogin","uerInfo"]),
		},
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding-top: 140upx;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}
		
		.form{
			padding: 0 56upx;
			padding-top: 60upx;
			.formInput{
				width: 100%;
				border-bottom: 1px solid rgba($color: #C8C8C9, $alpha: 0.15);
				padding-bottom: 10upx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;
				.iconfont1{
					position: absolute;
					bottom: 10upx;
					right: 0;
					width: 36upx;
					height: 36upx;
					z-index: 3;
				}
				.label{
					width: 100%;
					color: #333;
					font-size: 30upx;
					font-weight: bold;
					margin-bottom: 20upx;
				}
				.inputStyle{
					color: #333;
				}
				input{
					flex: 1%;
					font-size: 24upx;
					color: #333;
				}
			}
			.imgCodeBox{
				.imgCode{
					height: 100%;
					display: flex;
					align-items: flex-end;
					align-content: flex-end;
					justify-content: space-between;
					image{
						width: 200upx;
						height: 60upx;
						position: absolute;
						bottom: 20upx;
						right: 0;
					}
					input{
						flex: 1%;
						padding-right: 30upx;
					}
				}
			}
			.codeBox{
				.label{width: 180upx;}
				.send-con{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-right: 20upx;
					.send{
						display: inline-block;
						color:#2C1769;
						font-size: 24upx;
						width: 192upx;
						height: 60upx;
						background: #2C1769;
						border-radius: 30upx;
						color: #fff;
						font-size: 30upx;
						text-align: center;
						line-height: 60upx;
						position: absolute;
						bottom: 20upx;
						right: 0;
					}
					input{
						padding-right: 30upx;
					}
				}
			}
		}
		
		.submit-bottom{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding:0upx 56upx;
			padding-top: 60upx;
			.submit-btn{
				width: 100%;
				height: 100upx;
				font-size: 30upx;
				font-weight: 400;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #2c1769;
			}
		}
	}
</style>
